<template>
  <div>
    <Button type="primary" @click="btnClick">Primary</Button>
    <Select
      v-model="model13"
      filterable
      remote
      :label="labelRe"
      :remote-method="remoteMethod1"
      :loading="loading1">
      <Option v-for="option in options1" :value="option.fId" :key="new Date()">{{option.fClientName}}</Option>
    </Select>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        model13: 'xi',
        loading1: false,
        options1: [],
        list:[
          {
            fId:'xi',
            fClientName:'西安'
          },
          {
            fId:'ch',
            fClientName:'重庆'
          },
        ],
        labelRe:'西安',
      }
    },
    mounted(){
      this.options1 = this.list;
    },
    methods: {
      remoteMethod1 (query) {
        if (query !== '') {
          this.loading1 = true;
          setTimeout(() => {
            this.loading1 = false;
            const clientList = this.list.map(item => {
              return {
                fId: item.fId,
                fClientName: item.fClientName
              };
            });
            let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
            if (reg.test(query)) {
              this.options1 = clientList.filter(item => item.fClientName.indexOf(query) > -1);
            }
          }, 200);
        } else {
          this.options1 = [];
        }
      },
      btnClick(){
        this.$nextTick(function () {
          this.model13 = 'xi';
          this.labelRe = "西安";
        })

      }
    }
  }
</script>
